<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<text class="label">原密码</text>
				<input type="text" class="input" placeholder="输入您的原密码" placeholder-style="font-size:28rpx;color:#BBBBBB"
					v-model="oldpwd" password="true"></input>
			</view>
			<view class="form-item">
				<text class="label">新密码</text>
				<input type="text" class="input" placeholder="输入您的新密码" placeholder-style="font-size:28rpx;color:#BBBBBB"
					v-model="pwd" password="true"></input>
			</view>
			<view class="form-item">
				<text class="label">确认新密码</text>
				<input type="text" class="input" placeholder="再次输入新密码" placeholder-style="font-size:28rpx;color:#BBBBBB"
					v-model="repwd" password="true"></input>
			</view>
		</view>
		<button class="set-btn" form-type="submit" @click="onSub">确 认</button>

	</view>
</template>

<script>
	import {
		changePwd
	} from "../../../api/index.js"

	export default {
		data() {
			return {
				oldpwd: '',
				pwd: '',
				repwd: '',
			};
		},

		methods: {
			onSub() {
				switch (true) {
					case this.oldpwd == '':
						this.showToast('请输入原密码')
						break;
					case this.pwd == '' || this.pwd.length < 6:
						this.showToast('新密码不小于6位')
						break;
					case this.repwd == '':
						this.showToast('请再次输入新密码')
						break;
					case this.pwd != this.repwd:
						this.showToast('两次密码不一致')
						break;
					default:
						this.onChangPwd()
				}

			},
			async onChangPwd() {
				const res = await changePwd('s=ApiMy/setpwd', {
					oldpwd: this.oldpwd,
					pwd: this.pwd
				})
				const {
					status,
					msg
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					this.goBack(2000)
				}
			},
		}
	};
</script>
<style>
	.form {
		width: 90%;
		margin: 20rpx 3%;
		border-radius: 5px;
		padding: 20rpx 20rpx;
		padding: 14rpx 3%;
		background: #FFF;
	}

	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px #ededed solid;
		height: 100rpx;
		line-height: 100rpx;
	}

	.form-item:last-child {
		border: 0
	}

	.form-item .label {
		color: #8B8B8B;
		font-weight: bold;
		width: 200rpx;
	}

	.form-item .input {
		flex: 1;
		color: #000;
	}

	.set-btn {
		width: 90%;
		margin: 60rpx 5%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		color: #FFFFFF;
		font-weight: bold;
		background: #41644A;
	}
</style>
